linkreferraleasyhits4u
Home » Posts filed under Belajar Blog
Tampilkan postingan dengan label Belajar Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Belajar Blog. Tampilkan semua postingan

Membuat Widget Tab View Tanpa Edit HTML

Sabtu, 27 Oktober 2012

Pada tutorial kali ini membahas cara membuat widget tab view seperti yang terdapat pada blog ini (widget yang bertuliskan "Related Post, Label, Entri Populer dan Update Link's"). Untuk cara pemasangannya cukup mudah karena tidak perlu merubah html pada template blog. Dengan menggunakan tab view ini dapat membuat tampilan blog sobat jadi minimalis, Tertarik ingin mencoba memasangnya diblog sobat? Lihat tutorialnya dibawah ini.

contoh tab view

Berikut ini caranya :
  • Buka akun blog sobat.
  • Pilih menu "Rancangan/Design" --> "Elemen Laman" --> "Tambah Gadget/Add Gadget"
  • Pilih "Add HTML/JavaScript", kemudian masukkan kode javascript dibawah ini ke kolom HTML. Tidak perlu diberi judul.


  • Klik tombol "Simpan/Save".

  • Taruh Widget ini tepat diatas kumpulan widget lain yang ingin dimasukkan kedalam tab view dan pastikan widget-widget tersebut telah memiliki judul.

  • Pada script di atas hanya untuk maksimal 4 widget yang dapat masuk ke dalam tab view. Jika ingin menambah lagi widget yang ingin dimasukkan, ubah saja angka di organictabs: 4 sesuai dengan jumlah widget yang ingin dimasukkan.
  • Untuk script jquery dengan kode seperti ini <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> jika di template sobat sudah ada yang terbaru maka sobat bisa menghapus script ini.

cara membuat tab view

  • Klik tombol "Simpan" pada bagian atas. Selesai.
Sekarang coba lihat kembali tampilan beranda blog sobat. Jika cara diatas berfungsi, maka sekarang widget tabview telah terpasang di blog sobat.

Semoga berguna dan bermamfaat...


Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: 1 komentar:
Label:

Tips - Mengurangi Berat Loading Blog dengan HTML Optimizer

Kamis, 11 Oktober 2012

Semua Blogger pasti mencari cara agar loading blognya bisa lebih cepat termasuk saya, banyak cara yang bisa sobat lakukan untuk mempercepat loading blog, setelah sebelumnya pernah posting Percepat Loading Blog Dengan Cara Kompress CSS kali ini adalah dengan cara HTML Optimizer langsung aja sob langkah-langkahnya :

- Sebelum anda kebanyakan melancarkan aksi, lebih baik cek atau ukur dulu berat blog anda sehingga anda tau berapa lama loading blog anda, saya sendiri biasa menggunakan :
- http://www.iwebtool.com/speed_test
- http://www.numion.com/Stopwatch untuk patokan sebelum dan sesudah dikompres.

- Login ke akun blogger anda.
- Masuk ke Rancangan >> Edit HTML >>
- PENTING Klik "Download Template Lengkap" untuk mem-Back Up template anda, simpan juga semuakode css blog anda di notepad untuk jaga-jaga.
- Centang kotak Expand Template Widget
- Cari (Ctrl+F) kode berikut :

sekarang cari kode setelah <body> atau </head> hingga sebelum </body>
contoh :

</head>
MULAI DARI SINI
................................
................................
SAMPAI DISINI
</body>

Selanjutnya copy smua kode tersebut, setelah itu buka HTML OPTIMIZER
setelah terbuka paste semua kode tadi dan Klik Optimize! klu sudah jadi COPAS code hasil kompresan tadi ke tempat semula antara </head> hingga sebelum kode </body>

</head>
TARUH DISINI KODE HASIL KOMPRESAN
</body>

- Kalau sudah Klik "Simpan" tempalate

- Habis itu Sobat test lagi kecepatan loading blog sobat

untuk cara-cara yang lain sobat bisa mencarinya di search engine disana sudah banyak postingan-postingan dari teman-teman blogger yang lain dari yang simple sampai yang manual/rumit. Mungkin cukup sekian tips dari saya untuk Mengurangi Berat Loading Blog mohon maaf jika ada salah kata atau penulisan......harap maklum.

Salam Persahabatan.....




Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: 8 komentar:
Label: , ,

Agar Semua Halaman Posting Terindex Google

Kamis, 27 September 2012


Salah satu cara yang ternyata mudah untuk membuat semua halaman posting terindex di google dengan membuat Sitemap di google webmaster, untuk membuat sitemapnya silahkan sobat daftar dulu di Google Webmaster melalui google. Kalau sudah punya akun Google Webmaster silahkan Log In kesana, lalu menuju pengaturan Sitemap (Site Configuration – Sitemaps)



Langkah selanjutnya, perhatikan gambar diatas, silahkan kamu klik tombol Submit a Sitemap pada Google webmaster sobat agar Semua Halaman Posting Terindex Google, lalu masukkan URL sitemap berikut ini:

atom.xml?
dan
atom.xml?redirect=false

Lalu Submit URL. Setelah sitemap itu disubmit, lanjutkan dengan mensubmit URL berikut:

feeds/posts/default?orderby=updated

Lakukan hal yang sama untuk URL berikut:

atom.xml?redirect=false&start-index=1&max-results=500

Penting !! Jika jumlah posting blog sobat sudah banyak (lebih dari 500 postingan), maka masukkan juga sitemap berikut agar Semua Halaman Posting Terindex Google:

atom.xml?redirect=false&start-index=501&max-results=500

Untuk postingan lebih dari 1000, agar Semua Halaman Posting Terindex Google masukkan sitemap yang berikut ini:

atom.xml?redirect=false&start-index=1001&max-results=500

dan seterusnya, format URL sitemap (seperti diatas) menyesuaikan jumlah posting blog sobat. Setelah semua URL tersebut masuk ke Sitemaps Google, tutup saja Google Webmaster Toolnya dan tunggu hasilnya, maka biasanya semua Semua Halaman Posting Terindex Google dengan sempurna.

Semoga cara ini dapat membantu memaksimalkan Blog Sobat.......

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: 1 komentar:
Label: ,

Memasang Widget Alexa Rank di Blogspot

Rabu, 26 September 2012

Untuk mengetahui kualitas dari sebuah blog salah satunya adalah dengan memasang Widget Alexa Rank, dimana Widget Alexa juga turut menentukan posisi rank blog sobat pada search engine maupun di halaman google. Jika ingin mengetahuinya kualitas blog sobat, tidak ada salahnya jika sobat memasangnya. Berikut ini adalah langkah-langkah memasang widget alexa di blog :
  • Langkah pertama langsung saja masuk kesini 
  • Pada Alexa Sita Stats Button sobat pilih tampilan widget yang sobat inginkan,setelah itu masukan URL Blog kemudian klik Build Widget seperti gambar 1.
alexa
gamabr 1
  • Setelah itu sobat akan mendapatkan kode HTML Javascript seperti gambar 2.

alexa
gambar 2

  • Selanjutnya copy kode kode HTML Javascript tersebut di add widget pada element halaman template sobat, saya yakin sobat sudah banyak yang tahu dan mengerti cara menambah widget atau gadget di blog.

Demikian  Cara Memasang Widget Alexa Rank di Blogspot, mohon maaf jika ada kesalahan atau kekurangannya dalam penulisan artikel ini.

SELAMAT MENCOBA.........SALAM PERSAHABATAN

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Tips Membuat Link External Jadi NoFollow

Selasa, 25 September 2012

Berbagi Ilmu dan Pengetahuan.....yang dimaksud dengan Nofollow adalah sebuah tag dari atribut rel untuk menginstruksikan search engine seperti Google untuk tidak mengindeks (mengikuti) link yang mengarah ke sebuah halaman atau situs lain. Penggunaan nofollow ini dimaksudkan untuk mengurangi efektivitas spam di search engine termasuk pada komentar blog. Link eksternal adalah link yang mengarah halaman atau situs lain di luar blog kita.

<a href="http://eastjavablogs.blogspot.com" rel="nofollow">Blogger</a>

Jika sebuah link diberikan tag rel nofollow di belakangnya maka search engine tidak akan mengindeks link tersebut atau tidak memberikan backlink ke link tersebut. Robot search engine hanya akan mengindeks postingan kita dan bukan link eksternal. Penambahan tag rel="nofollow" ini membuat optimal SEO untuk blog kita tetap terjaga dengan baik dan hal ini membuat blog anda terlihat lebih baik di mata search engine seperti Google.

Manfaat lain dengan mengubah link eksternal menjadi nofollow adalah:
- Dapat meningkatkan page rank (PR) blog
- Semakin tinggi page rank (PR) semakin baik posisi blog di search engine
- Bisa mendapatkan traffic yang banyak dari search engine
- Untuk bermain SEO blog nofollow sangat dibutuhkan

Cara Membuat Link Eksternal Menjadi NoFollow
Untuk Blogger.com atau blogspot sendiri sudah ada fitur menambahkan tag rel nofollow ketika membuat link di saat menulis postingan. Untuk lebih jelasnya bisa lihat contoh berikut ini:


Cara Mengubah Semua Link Eksternal Menjadi NoFollow
Berikut ini cara kalau ingin mengubah semua link eksternal blog menjadi nofollow secara otomatis:
  •  Login ke akun blogger.com
  •  Pilih Template kemudian Edit HTML
  •  Jangan lupa centang Expand Template Widget
  •  Cari kode </head> Lalu taruh kode berikut di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
<![CDATA[
jQuery('a').each(function(){var a=jQuery(this).attr('href');if(typeof a!='undefined'&&a!=""&&(a.indexOf('http://')!=-1||a.indexOf('https://')!=-1)&&a.indexOf(window.location.hostname)==-1){jQuery(this).attr("rel","nofollow")}});
]]>
</script>
  •  Simpan jika sudah selesai.

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: 3 komentar:
Label: ,

Kode Dasar HTML

Buat sobat blogger yang masih newbie seperti saya, ini ada beberapa kode-kode dasar yang perlu untuk diketahui. Yang di maksud HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman sebuah website atau blog. kode - kode inilah yang biasa digunakan oleh blogger dalam mempercantik tampilan postingan mereka. Lanjutan dari Posting saya sebelumnya tentang dasar-dasar HTML.

Berikut beberapa kode - kode dasar HTML :

<b>Membuat tulisan menjadi tebal</b>
Hasilnya : 
Membuat tulisan menjadi tebal
<u>Membuat tulisan memiliki garis bawah</u>
Hasilnya : 
Membuat tulisan memiliki garis bawah
<i>Membuat tulisan miring</i>
Hasilnya : 
Membuat tulisan miring
<center>Membuat tulisan ditengah</center>
Hasilnya : 
Membuat tulisan ditengah
<s>Membuat coret ditengah</s>
Hasilnya : 
Membuat tulisan ditengah
<marquee>Membuat tulisan berjalan</marquee>
Hasilnya : 
Membuat tulisan berjalan
<blink>Membuat tulisan berkedip - kedip</blink>
Hasilnya : 
Membuat tulisan berkedip - kedip
<small>Membuat tulisan agak kecil</small>
Hasilnya : 
Membuat tulisan agak kecil
<div style="color:red">Membuat tulisan berwarna (merah)</div>
Hasilnya : 
Membuat tulisan berwarna (merah)
NB :
tulisan red bisa di ganti sesuai selera sobat blogger. misal, blue (biru), yellow (kuning), brown (coklat), green (hijau), white (putih), black (hitam) purple (ungu) dll.
<div style="background-color: red">Membuat tulisan background berwarna (merah)</div>
Hasilnya:
Membuat tulisan background berwarna (merah)
<ul>
<li>Membuat bullet dot</li>
<li>Membuat bullet dot</li>
<li>Membuat bullet dot</li>
</ul>
Hasilnya : 
  • Membuat bullet dot
  • Membuat bullet dot
  • Membuat bullet dot
<ol>
<li>Membuat bullet angka berurutan</li>
<li>Membuat bullet angka berurutan</li>
<li>Membuat bullet angka berurutan</li>
</ol>

Hasilnya : 
  1. Membuat bullet angka berurutan
  2. Membuat bullet angka berurutan
  3. Membuat bullet angka berurutan

masih banyak kode-kode yang lainnya sob.

Silahkan dicoba dan di praktekkan sendiri sob.....

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Parse Kode HTML

Minggu, 16 September 2012

-->-->
-->




-->
Parse kode HTML dapat digunakan untuk membantu mem-parse atau mengurai kode dalam script/javascript secara otomatis agar mudah dalam instalasi atau penggunaan. Dengan parse kode ini, sobat dapat menambahkan kode HTML ke dalam posting atau untuk keperluan lain.

Cara Penggunaan: Masukkan kode HTML yang akan diurai ke dalam kolom di atas, lalu klik Parse Script. Kalau cara diatas ga bisa kalian bisa klik DISINI sob.....

Selamat Mencoba....Semoga Bermanfaat...

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Membuat Menu Navigasi Breadcrumb Blog

Jumat, 14 September 2012

Ketemu lagi ni sob...mumpung lagi santai nc sob banyak2 buat posting, sekarang saatnya bikin Breadcrumb di blog bagi pemula..seperti saya juga sc he..he..langsung saja sob Breadcrumb adalah link navigasi yang biasanya tampil cantik di atas judul posting dalam modus postingan bukan dalam modus Home seperti terlihat diatas judul posting blog ini dimana Breadcrumb menampilkan Halaman Depan atau Home > Label> Judul Posting.
Jika sobat tertarik ni Cara Membuat Menu Navigasi Breadcrumb di Blogger :
  • Log in ke akun sobat di blogger.com 
  • Klik tanda panah, lalu pilih Template
  • Sebaiknya lakukan dulu backup template dengan klik Backup / restore atau Cadangkan / Pulihkan, lalu klik download full template.
  • Klik tanda x untuk kembali ke menu template
  • Selanjutnya plih Edit HTML  --> klik Procced atau proses
  • Centang pada Expand Widget Templates
  • Cari kode <b:if cond='data:post.title'>  untuk memudahkan mencarinya gunakan Ctrl +F
  • Paste kode di bawah ini dan letakkan dibawah atau setelah kode  tersebut
    <b:if cond='data:blog.pageType == "item"'>
    <div class='breadcrumb'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    &#187;
    </b:if>
    <data:post.title/>
    </div>
    </b:if>
  • Selanjutnya sobat blogger cari kode   ]]></b:skin>  dan copy paste kode ini di atasnya :
    .breadcrumb {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 10px 0px;
    font-size:90%;
    line-height: 1.2em;
    border-bottom:3px double #e6e4e3;
    }
  • Setelah itu tinggal Save Template..
  • Saatnya untuk melihat hasilnya... kalau belum tampil mungkin sobat belum membuat label pada postingannya, jadi setiap sobat membuat artikel harus di beri labelnya....baru dech Breadcrumb nya bisa tampil.
Selamat mencoba sob,,,,,Moga Sukses........................!

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Percepat Loading Blog Dengan Cara Kompress CSS


Blogger"Apakah sobat ingin mempercepat loading blogspot ? pada posting ini akan saya share tentang cara mempercepat loading blog dengan teknik kompresi di CSS untuk pengguna blogger/blogspot, cara yang akan digunakan ini terbilang lebih simple dan cepat, yaitu dengan mengunjungi situs-situs yang menyediakan kompresi css untuk mempercepat loading blog, dengan bantuan situs-situs tersebut sobat bisa kompress CSS sobat secara instant/otomatis dengan memanfaatkan tool gratis kompresi CSS secara online.

 Jika sobat ingin mencobanya, sobat bisa mengunakan bantuan beberapa situs dibawah ini :

1. http://www.cssoptimiser.com/
2. http://www.cssdrive.com/index.php/main/csscompressor
3. http://www.csscompressor.com/
4. http://www.csstidyonline.com/

sebetulnya masih banyak lagi situs - situs yang menyediakan kompresi CSS untuk mempercepat loading blog kita, silakan cari/browsing di mbah google.

"Yang harus selalu sobat ingat sebaiknya sebelum edit/modding template ada baiknya sobat backup/download template sobat untuk menghindari hal-hal yang tidak di inginkan"..........setelah itu baru dech...buka situs yang akan sobat gunakan untuk kompress CSS,  cari dan copy kode CSS pada template sobat yaitu letaknya di antara  <b:skin> --sampai--> ]]></b:skin> , lalu memasukkan/paste kode CSS kedalam form yang disediakan, klik compress, jadi dech.....   Lalu copy hasil compressan tadi, dan paste kembali di antara <b:skin> --sampai--> ]]></b:skin>  yang ada di template tadi, kalau sudah simpan template sobat dan rasakan perbedaanya.

Sekian dulu tentang cara mempercepat loading blog dengan teknik kompresi di CSS untuk pengguna blogger/blogspot.

Selamat mencoba, semoga bermanfaat...!
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Cara Posting Artikel ke dalam Blog

Kamis, 13 September 2012

Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com.Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.
Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.

Toolbar yang ada ketika posting :

--> Untuk merubah jenis hurup yang di gunakan


--> Untuk merubah ukuran hurup (heading)


--> Untuk Menebalkan hurup


--> Untuk memiringkan hurup


--> Untuk merubah warna hurup


--> Untuk membuat link


--> Untuk membuat artikel menjadi rata kiri


--> Untuk membuat tulisan menjadi di tengah


--> Untuk membuat artikel menjadi rata kanan


--> Untuk membuat artikel menjadi rata kiri dan rata kanan


--> Untuk membuat sub bahasan oleh angka


--> Untuk membuat sub bahasan oleh bullet


--> Untuk mengecek spelling


--> Untuk memasukan gambar(upload gambar)


--> Untuk membuat artikel dalam kode HTML


--> Untuk membuat artikel dalam mode Compose (biasa)


--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan
yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.
Langkah-langkah dalam memposting suatu artikel:
Sebaiknya klik terlebih dahulu " Edit HTML",jika langsung di mode "Compose/Tulis", sering terjadi hang pada komputer (pengalaman saya pribadi).
Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.
Klik tombol "Compose / Tulis " untuk melakukan editing (jika anda masih bingung dengan kode HTML).

Klik tombol tool yang berlambang " panorama" berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi postingan anda.

Klik tombol " Preview " untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.

Klik tombol " Publish ".

Selesai.

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Belajar Dasar Dasar HTML

Belajar dasar dasar HTML ini sangat di perlukan, Walaupun sekarang kita bisa membuat web / blog hanya dengan klak-klik mouse seperti di blogger ini tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, karena untuk pemasangan widget manual dan untuk modifikasi HTML memerlukan pengetahuan dalam dasal dasar HTML.

Diantaranya sebagai berikut.

- CARA MEMASUKKAN GAMBAR
kode :
contoh 1

<img alt="Power By. Abun789.co.cc" border="0" src="http://i747.photobucket.com/albums/xx115/abunsahroni/ceria-1.jpg" />
Contoh 2
&lt;img alt="Power By. Abun789.co.cc" border="0" src="http://i747.photobucket.com/albums/xx115/abunsahroni/ceria-1.jpg" /&gt;

keterangan :
yang warna biru adalah lokasi gambar kamu.
height="50" width="100" adalah ukuran lebar dan tinggi gambar
hasil :

contoh1

Power By. Abun789.co.cc

contoh 2



- CARA MEMBUAT LINK
Kode :
<a href="http://abun789.wordpres.com/">Tif dan trik Blog </a>
contoh :
Tif dan trik Blog
Keterangan :
Text warna biru adalah link yang dituju.
Tulisan "Tif dan trik blog" adalah tulisan yang ditampilkan.
Klo pengen yang dikasih ling bukan tulisan tapi gambar, mudah tinggal tambah aja dengan alamta gambar contoh :
Power By. Abun789.co.cc Membuka dengan windows baru (ngga ngerti coba aja klik gambarnya)
Power By. Abun789.co.cc membuka pada jendela yang sama(nggak ngerti coba aja klik gambarnya)
Kalo Mau tampil di jendela yang sama  Buang tulisan "target="_blank"
Kode :
<a href="http://abun789.wordpress.com/" target="_blank"><img alt="Power By. Abun789.co.cc" border="0" src="http://i747.photobucket.com/albums/xx115/abunsahroni/ceria-1.jpg" /></a>


- CARA MENGETENGAHKAN TEXT atau GAMBAR
Contoh :
1.
Tulisan Kamu disini

2.


Power By. Abun789.co.cc

Kode :
<center>Tulisan Kamu disini</center>
Keterangan :
center bisa di ganti dengan Life Right botom
Ganti tulisan "Tulisan Kamu disini" dengan tulisan yana kamu inginkan, atau bisa juga diganti dengan Alamat gambar seperti yang di atas itu lohh

- CARA MEMBUAT BARIS BARU
Kode :
<br>

Keterangan :
Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan

- MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH
Contoh dan kode
Contoh Kode : <b>Contoh</b> (Tebal)
Contoh Kode : <i>Contoh</i>   (Miring)
Contoh  Kode :  <u>Contoh</u> (Garis Bawah)


- MEMBERI WARNA TEXT
Contoh dan Kode
Contoh Kode : <span style="color: red;"> Contoh </span>

Keterangan :
Ganti Tulisan contoh dengan Tulisan kamu
Untuk mengganti warna silahkan lihat kodenya pada hasil downloadan

Sumber : http://www.abun.bogor4u.com/2010/09/tips-blog-cara-belajar-dasar-dasar-html.html

 
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Cara Mudah Membuat Border Sudat Melengkung

Selasa, 11 September 2012

Saya kira sudah banyak tutorial blog tentang cara membuat border sudut melengkung pada widget / element halaman yang ada di blog. Contohnya sobat bisa lihat gambar dibawah ini :

cara membuat border sudut melengkung atau rounded corner.

Jika sobat tertarik ingin membuatnya langkahnya sangat sederhana, gini sob caranya :
    Log In ke akun blog Sobat, terus pilih Dashboard lalu pilih Tata Letak / Rancangan

Cara membuat sudut melengkung pada blog.
    kemudian pilih tab Edit HTML

Sudut Melengkung ( Rounded Corners ) pada CSS.
    setelah itu contreng tulisan Exspand Widget Templates
Membuat Sudut Border Melengkung pada blog.
Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob), setelah ketemu tinggal letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> tadi

}
.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}

lihat seperti gambar dibawah

Rounded Corner (Sudut melengkung).
Selanjutnya,Simpan Templates sobat ya.

Untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan dan klik tulisan Add New Widget atau Tambah Gadget

Cara Membuat Border pada Widget / Border Sudut Melengkung.

Selanjutnya pilih HTML/Javascript dan letakkan kode berikut diantara widget kode HTML yang akan ditambahkan

<div class='membuatbordermelengkungroundedcorner'>
Disini kode yang akan ditambahkan (bisa kode html iklan ataupun kode javascript dan sejenisnya)
</div>

Cara Membuat Border pada Widget / Border Sudut Melengkung.

Cara Membuat Border Kotak-Kotak pada Sidebar Blog.
Lihat Gambar Lebih Besar

Setelah itu, tinggal klik Simpan dan blog sobat sudah memiliki border melengkung pada widget yang diinginkan...
Selamat Mencoba...

Sumber : http://pelajaran-blog.blogspot.com/2011/02/membuat-border-sudut-melengkung-pada.html
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: 2 komentar:
Label: ,

Cara Mudah Meningkatkan Pengunjung Blog

Hai Sobat...
Melalui posting ini ane mengajak sobat semua untuk mengambil keuntungan dari kecepatan penyebaran sistem ini dalam bentuk backlink, salah satu cara yang mudah untuk meningkatkan pengunjung blog.
Caranya sangat mudah, Yang harus sobat lakukan adalah dengan meletakkan link-link berikut di blog ataupun di artikel sobat.
    e46313345822479627a3141ea879b2d7_google-update-pagerank
  1. Selamat2U.blogspot.com.
  2. InformasiTerbaru.com
  3. Tribunjambi.com
  4. Kompasiana.com
  5. Kerincionline.com
  6. mualaf.com
  7. Cahaya.com
  8. InfoSinta.com
  9. Kayosakti.blogdetik.com.
  10. EastJava cool blog's.
Tapi ingat, sebelum sobat meletakkan link diatas, harus menghapus peserta nomor 1 dari daftar. Sehingga semua peserta naik 1 level. Yang tadinya nomor 2 jadi nomor 1, nomor 3 jadi 2, dst. Kemudian masukkan link sobat di bagian paling bawah (nomor 10).
Jika tiap peserta mampu mengajak 5 orang saja, maka jumlah backlink yang akan didapat adalah:
Ketika posisi anda 10, jumlah backlink = 1
Posisi 9, jml backlink = 5
Posisi 8, jml backlink = 25
Posisi 7, jml backlink = 125
Posisi 6, jml backlink = 625
Posisi 5, jml backlink = 3,125
Posisi 4, jml backlink = 15,625
Posisi 3, jml backlink = 78,125
Posisi 2, jml backlink = 390,625
Posisi 1, jml backlink = 1,953,125
Dan semuanya menggunakan kata kunci yang sobat inginkan. Dari sisi SEO sobat sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung web para downline sobat mengklik link itu, juga membuat ngeblog sobat mendapatkan traffik tambahan.

Nah, silahkan copy paste artikel ini, dan hilangkan peserta nomor 1 lalu tambahkan link blog/website sobat di posisi 10. Ingat, sobat harus mulai dari posisi 10 agar hasilnya maksimal. Karena jika sobat tiba2 di posisi 1, maka link sobat akan hilang begitu ada yang masuk ke posisi 10.
Ane yakin dalam waktu yang singkat, Pagerank blog sobat pasti langsung naik drastis di luar dugaan. Selamat mencoba trik rahasia ini!

Jika sobat semua berkenan?copas aja! terus sarankan ke teman yang lain supaya terus menyebar!begitu pula seterusnya!
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: 1 komentar:
Label: ,

Sitemap

Senin, 10 September 2012

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Cara Pemasangan Emoticon di Komentar Blog

Sabtu, 08 September 2012

Salam Persahabatan....Kali ini ane mau mengulas tentang pemasangan emoticon pada komentar blog, mungkin tidak semua template bisa berhasil menggunakan cara ini. Tapi bagi sobat blogger yang ingin mencoba memasang emoticon pada komentar silakan ikuti langkah-langkah berikut ini :

1. Jika sudah klik Design -> Edit HTML
2. Beri tanda centang pada "Expand Widget Templates"
3. Cari kode </body>
4. Lalu letakkan script dibawah ini diatas kode </body>
<script src='http://hbhost.googlecode.com/files/yemoticon.js' type='text/javascript'/>
5. Trus cari kode berikut ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if>
</b:if>
</p>

6. Kalau tidak sama, cari yang paling mendekati. Kemudian letakkan kode berikut ini dibawah <p class='comment-footer'>
<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

7. Klik Save Template.

8. Selesai. Silahkan dites di kotak komentar anda.
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Membuat Scrollbar di Kotak Komentar

Kamis, 06 September 2012

Banyaknya jumlah komentar pada post/posting adalah kendala utama blog menjadi berat karena beban loading pada komentar menjadi lebih besar. Dan juga blog anda akan memanjang layaknya kereta api. Maka dari itu para komentator yang ingin berkomentar di blog anda akan melangkahi terlebih dahulu puluhan bahkan ratusan komentar.
Berikut adalah gambar kotak komentar yang telah diberi fungsi scroll :

   
Langkah - langkah menambahkan scroll  :
1. Pilih tab Rancangan (Design) >> Edit HTML
2. Centang "Expand Widget Template"
3. Cari kode 
 <div class='comments' id='comments'>
4. Tambahkan kode 
 style='max-height:300px;overflow:auto;'
5. Sehingga hasilnya akan seperti ini   
<div class='comments' id='comments' style='max-height:300px;overflow:auto;'>

6. Save template anda. Semoga bermanfaat.

Sumber terkait = Maz Template Collection: Cara Mudah Membuat Scroll Pada Kotak Komentar
Gunakanlah artikel ini untuk kegiatan non komersil. Artikel ini dilindungi hak ciptanya oleh situs yang dijadikan sumber. (Google's Team)
Under Creative Commons License: Attribution
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Mencari Kode Warna




Nc sob untuk mengetahui kode warna, jika kalian ingin merubah warna teks maupun background.

semoga bermanfaat....
SALAM PERSAHABATAN..........................................

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Mempercantik Kolom Kotak Komentar Standar Pada Blogspot

Apabila mencermati model kolom kotak komentar pada setiap blog yang kita kunjungi, maka tidak jarang kita akan mendapati kolom kotak komentar yang telah dimodifikasi dengan model kustom sehingga tampilannya menjadi lebih menarik bila dibandingkan dengan tampilan kolom kotak komentar yang diberikan oleh Blogger (termasuk kolom kotak komentar yang saya gunakan pada blog ini). Namun tahukah Anda, bahwasanya kita juga dapat melakukan modifikasi model kolom kotak komentar standar yang diberikan oleh Blogger, sehingga tampilannya tidak kalah menarik apabila dibandingkan dengan model kustom.

Seperti yang kita tahu, bahwasanya selain dengan menggunakan model kustom untuk mempercantik tampilan kolom komentar, selama ini yang sering dilakukan hanyalah sebatas menambahkan scroll untuk kolom komentar sehingga jika jumlah komentar cukup banyak, maka tampilan halaman tidak terlalu panjang. Namun demikian tidak jarang pula pengelola blog yang kurang memperhatikan tampilan kotak komentar (membiarkan apa adanya sesuai dengan desain tampilan yang diberikan oleh Blogger). Padahal dengan hanya menambahkan sedikit kode CSS tertentu ke dalam template, maka desain tampilan kolom kotak komentar akan menjadi lebih menarik (seperti halnya bila kita menggunakan model kustom).

Nah, untuk keperluan ini maka terlebih dulu yang perlu diperhatikan adalah setelan untuk “Pos dan Komentar’ pada blog yang Anda kelola, karena teknik ini hanya dapat diterapkan dalam setelan ‘Tersemat’. Sehingga jika saat ini Anda belum menggunakan setelan ini untuk ‘Pos dan Komentar’ blog yang Anda kelola, maka ubah terlebih dulu setelanya dengan cara klik menu ‘Setelan’ > ‘Pos dan Komentar’ > kemudian pada pilihan ‘Lokasi Komentar’ gunakan pilihan ‘Tersemat’, seperti yang tampak pada gambar di bawah ini.
Lokasi Komentar Tersemat
Sumber gambar: blogger.com
Apabila setelan untuk lokasi komentar telah diubah menjadi ‘Tersemat’, maka langkah berikutnya buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’. Kemudian untuk mempermudah proses, cari kode ]]></b:skin> dan sisipkan kode berikut ini tepat di atasnya.
/*--------------------------------------------------------------
Kustomisasi Kolom Komentar Blogspot
Oleh: Semar Bingung
Blog: http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.comments {
  padding: 4px;
  background: #eeeeee;
  border: 1px solid #999999;
  -moz-border-radius: 5px 5px 5px 5px;
}

.comments-content .comment-thread {
  padding: 4px;
  background: #ffffff;
  border: 1px solid #cccccc;
}

.comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;
}

.comments .comments-content .comment:first-child {
  padding-top: 0px;
}

.comments .avatar-image-container {
  height: 36px;
  padding-left: 4px;
  background: #ffffff;
  border: 1px solid #cccccc; 
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comment-block {
  padding-top: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  background: #fcfcfc;
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comments-content .inline-thread {
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comments-content .comment-replies {
  margin-left: 48px;
}

.comments .comment .comment-actions a {
  margin-right: 4px;
  padding: 2px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .continue a {
  padding: 2px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
}

.comments .comments-content .datetime {
  float: right;
  margin-right: 4px;
}

.comments .comments-content .icon.blog-author {
  float: right;
  margin-right: 3px;
}

.comment-form {
  max-width: 100%;
  width: 100%;
}


Setelah kode tersebut disisipkan dalam template, langkah berikutnya simpan template Anda sehingga akhirnya model kolom komentar standar Blogger tampilannya akan berubah menjadi seperti yang tampak pada gambar di bawah ini.
Model Kolom Komentar Blogger Yang Telah Dimodifikasi

Kemudian apabila Anda ingin menyesuaikan warna garis dan warna latar yang digunakan pada kolom komentar tersebut dengan desain halaman blog yang Anda kelola, maka Anda tinggal mengganti kode warna yang terdapat pada kode border: dan background:, sebagai contoh misalnya yang terdapat dalam kode border: 1px solid #999999; dan background: #eeeeee;.

Semoga berguna dan bermanfaat.

Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,

Backlink Speed

Hai sob.. nc buat kalian yang ingin dapatkan backlink tanpa bayar dan tentunya Gratis, langsung aja download dan ikuti petunjuk nya bagi yang nyari backlink gratis tis...
1. Setelah Download Silahkan Extrack File Rar nya, lalu silahkan Klik Install.
2. Jalankan BAcklink Speed
3. Klik add untuk Masukkan Blog atau Web site : 
http://eastjavablogs.blogspot.com/ dan Alamat Blog or Web site sobat

4. Silahkan Klik Submit, dan tunggulah beberapa saat dan otomatis Blog sobat sudah tersubmit. 

Untuk cek Apakah Link Blog kita sudah tertanam, silahkan sobat Buka List link yang diberikan bersamaan dengan software ini dan ketikkan Ulr sobat dibelakangnya. 
Contoh : http://whois.domaintools.com/[URL Anda] 

Silahkan bagi anda yang ingin mendownload softwarenya. good luck temen-temen blogger....
dan untuk sobat yang mau mendownloadnya klik disini
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: 4 komentar:
Label: ,

Cara Menambah Page Halaman 1, 2, 3

Selasa, 04 September 2012


Cara Menambahkan Nomor Halaman di Bawah Area Postingan
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #fff;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #fff;
background-color: #333;
}

.showpageNum a {border: 1px solid #505050;
color: #666;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #fff;
background-color: #333;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #000000;
background-color: #ffffff;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #ffffff;
background-color: #333;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #fffff;
color: #ffffff;
background-color: #333333;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #ffffff;
background-color: #333;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #ffffff;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

5. Simpan Kalau sudah selesai.
6. Pindahkan Gadget HTML tersebut dengan mendragnya ke bawah Posting Blog (Blog Post)
Selengkapnya..
Created by: eastjavablogs
Learning, Computer, Internet and Blog
:: :: Tidak ada komentar:
Label: ,
Langganan: Postingan (Atom)
MISTER LINK'S MAGICAL WIDGETS